<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            height:3000px;
        }
        div{
            height:100px;
            width:100px;
            background-color: aqua;
            /* 相对定位: 相对于原来位置发生改变 
               left/right/top/bottom
               不会脱离文档流
            */
            /* position: relative;
            left:10px;
            top:10px; */

            /* 绝对定位: 父级(祖先)如果有定位，就会相对于父级(祖先)发生位置的改变
                        如果父级(祖先)如果没有定位，相对于body 发生位置的改变
               left/right/top/bottom
               会脱离文档流 
               "父(祖先)相子绝"
            */
            /* position: absolute;
            left:10px;
            top:10px; */

          /* 固定定位 : 相对于body位置发生改变，滚轮滚动，任然固定
            会脱离文档流 

            left+right---left 优先级更高
            top+bottom---top  优先级更高
          */
            position: fixed;
            left:10px;
            top:10px;
            /* bottom:10px;
            right:10px; */
        }
        h1{
            height:40px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <!-- 定位
    position  4个值
    static 默认(不定位) -->

    <div>
        <a href="#">返回顶部</a>
    </div>
    <h1></h1>
</body>
</html>